import React, { Component } from 'react';
import styles from './index.module.scss';
import { withRouter } from 'next/router';


@withRouter
class ConfirmDialog extends Component {
  static defaultProps = {
    title: 'Confirm',
    message: 'Are you sure?',
    onCancel: () => {},
    onConfirm: () => {},
    cancelText: 'Cancel',
    confirmText: 'Delete',
    isOpen: false,
  };

  handleCancel = () => {
    this.props.onCancel();
  };

  handleConfirm = () => {
    this.props.onConfirm();
  };

  render() {
    const { title, message, cancelText, confirmText, isOpen } = this.props;
    
    if (!isOpen) return null;
    
    return (
      <div className={styles.overlay}>
        <div className={styles.confirmDialog}>

        <button className={styles.closeButton} onClick={this.handleCancel}>
          <span>×</span>
        </button>

          <div className={styles.header}>
            <h3 className={styles.title}>{title}</h3>
          </div>
          
          <div className={styles.content}>
            <p className={styles.message}>{message}</p>
          </div>
          <div className={styles.actions}>
            <button className={styles.cancelButton} onClick={this.handleCancel}>
              {cancelText}
            </button>
            <button className={styles.confirmButton} onClick={this.handleConfirm}>
              {confirmText}
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default ConfirmDialog;